<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/layout/layout.xhtml">
	<ui:define name="contentPart">
		<h:form id="formId">
			<h:outputText value="Shopping list:" />
			<p:dataTable value="#{shoppingListsAction.allLists}" var="db"
				paginator="true" rows="20">
				<p:column headerText="Date">
					#{db.list.creationDate}
				</p:column>

				<p:column headerText="Number of items">
					#{fn:length(db.list.items)}
				</p:column>

				<p:column>
					<p:commandButton value="Details" icon="ui-icon-zoomin"
						action="#{shoppingListsAction.showListDetails}"
						update=":formId :growl">
						<f:setPropertyActionListener value="#{db}"
							target="#{shoppingListsAction.selectedShoppingList}" />
					</p:commandButton>
					<p:commandButton value="Edit" icon="ui-icon-pencil"
						action="#{shoppingListsAction.showEditionDialog}"
						update=":formId :growl :editionForm:editionDialog">
						<f:setPropertyActionListener value="#{db}"
							target="#{shoppingListsAction.selectedShoppingList}" />
					</p:commandButton>
					<p:commandButton value="Copy" icon="ui-icon-copy"
						action="#{shoppingListsAction.copySelectedList}"
						update=":formId :growl">
						<f:setPropertyActionListener value="#{db}"
							target="#{shoppingListsAction.selectedShoppingList}" />
					</p:commandButton>
					<p:commandButton icon="ui-icon-trash"
						value="Delete"
						action="#{shoppingListsAction.deleteSelectedList}"
						update=":formId :growl">
						<f:setPropertyActionListener value="#{db}"
							target="#{shoppingListsAction.selectedShoppingList}" />
					</p:commandButton>
				</p:column>
			</p:dataTable>

			<p:commandButton value="New" icon="ui-icon-circle-plus"
				actionListener="#{shoppingListsAction.showListCreationDialog}"
				update=":creationForm:creationDialog">
				<f:setPropertyActionListener value="#{db}"
					target="#{shoppingListsAction.selectedShoppingList}" />
			</p:commandButton>

			<div id="detailsDiv" style="#{shoppingListsAction.detailsDialogVisible? 'display:block' : 'display:none'}">
				Details:
				<p:commandButton value="Hide"
					actionListener="#{shoppingListsAction.hideListDetails}"
					update=":formId" />
				<p:dataTable
					value="#{shoppingListsAction.selectedShoppingList.list.items}"
					var="item" paginator="true" rows="20" paginatorPosition="bottom">
					<p:column headerText="Name">
						#{item.name}
					</p:column>

					<p:column headerText="Quantity">
						#{item.quantity}
					</p:column>

					<p:column>
						<p:selectBooleanCheckbox value="#{item.ticked}" disabled="true" />
					</p:column>
				</p:dataTable>
			</div>
		</h:form>

		<h:form id="creationForm">
			<p:dialog id="creationDialog" widgetVar="creationDialog"
				visible="#{shoppingListsAction.creationDialogVisible}" modal="true"
				resizable="false" header="Details" closable="false">

				<p:commandButton value="Add item" icon="ui-icon-plus"
					actionListener="#{shoppingListsAction.addItemInNewList}"
					update=":creationForm:creationDialog" />

				<p:dataTable value="#{shoppingListsAction.newList.items}" var="item"
					paginator="true" rows="20" paginatorPosition="bottom">
					<p:column headerText="Name">
						<p:inputText value="#{item.name}" />
					</p:column>

					<p:column headerText="Quantity">
						<p:inputText value="#{item.quantity}" />
					</p:column>
				</p:dataTable>

				<h:panelGrid columns="2">
					<p:commandButton value="Create" icon="ui-icon-circle-check"
						actionListener="#{shoppingListsAction.createNewList}"
						update=":creationForm:creationDialog :growl :formId" />
					<p:commandButton value="Cancel" icon="ui-icon-circle-close"
						actionListener="#{shoppingListsAction.cancelNewListCreation}"
						update=":creationForm:creationDialog" />
				</h:panelGrid>
			</p:dialog>
		</h:form>

		<h:form id="editionForm">
			<p:dialog id="editionDialog" widgetVar="editionDialog"
				visible="#{shoppingListsAction.editionDialogVisible}" modal="true"
				resizable="false" header="Details" closable="false">

				<p:commandButton value="Add item" icon="ui-icon-plus"
					actionListener="#{shoppingListsAction.addItemInEditedList}"
					update=":editionForm:editionDialog" />

				<p:dataTable
					value="#{shoppingListsAction.selectedShoppingList.list.items}"
					var="item" paginator="true" rows="20" paginatorPosition="bottom">
					<p:column headerText="Name">
						<p:inputText value="#{item.name}" />
					</p:column>

					<p:column headerText="Quantity">
						<p:inputText value="#{item.quantity}" />
					</p:column>

					<p:column>
						<p:commandButton
							icon="ui-icon-trash"
							action="#{shoppingListsAction.removeItemInEditedList}"
							update=":editionForm:editionDialog">
							<f:setPropertyActionListener value="#{item}"
								target="#{shoppingListsAction.selectedItem}" />
						</p:commandButton>
					</p:column>
				</p:dataTable>

				<h:panelGrid columns="2">
					<p:commandButton value="Save" icon="ui-icon-circle-check"
						action="#{shoppingListsAction.updateSelectedList}"
						update=":editionForm:editionDialog :growl :formId" />
					<p:commandButton value="Cancel" icon="ui-icon-circle-close"
						actionListener="#{shoppingListsAction.hideEditionDialog}"
						update=":editionForm:editionDialog" />
				</h:panelGrid>
			</p:dialog>
		</h:form>
	</ui:define>
</ui:composition>
</html>
